<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购-个人中心</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <!-- 引入axios -->
    <script src="../../public/js/axios.min.js"></script>

    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./persional.css">


</head>

<body>
    <div id="app">
        <!-- header -->
        <header class="my-header">
            <div class="center hd-context">
                <div v-show="isLogin">
                    <el-dropdown>
                        <div class="hd-avatar">
                            <el-avatar shape="square" :size="30" fit="fill" :src="userInfo.cusAvatar"></el-avatar>
                            <a>{{userInfo.cusNickname}}</a>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <p @click="gotoCar()">购物车</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p>个人中心</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="logout()">退出</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
                <div v-show="!isLogin"><a href="../login/login.html">登录</a></div>
                <div v-show="!isLogin"><a href="../login/login.html">注册</a></div>
                <div><a href="../invitation/invitation.html" target="_blank">店铺入驻</a></div>
            </div>
        </header>
        <div class="top center">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="../index/index.html">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item><a href="./personal.html">个人中心</a></el-breadcrumb-item>
                <el-breadcrumb-item>{{breadcrumbText}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main center">
            <div class="left">
                <div class="user-info">
                    <div>
                        <img width="80px" height="80px" style="border-radius: 5px;" :src="userInfo.cusAvatar">
                        <h1>{{userInfo.cusNickname}}</h1>
                    </div>
                </div>
                <div class="select-list">
                    <ul>
                        <li :class="{'select':selectIndex===0}" @click="switchIndex(0,'我的资料')"><i></i><span
                                class="el-icon-user"></span>我的资料</li>
                        <li :class="{'select':selectIndex===1}" @click="switchIndex(1,'地址管理')"><i></i><span
                                class="el-icon-location-outline"></span>地址管理</li>
                        <li :class="{'select':selectIndex===2}" @click="switchIndex(2,'我的订单')"><i></i><span
                                class="el-icon-takeaway-box"></span>我的订单</li>
                        <li :class="{'select':selectIndex===5}" @click="switchIndex(5,'我的订单')"><i></i><span
                                class="el-icon-receiving"></span>服务记录</li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="user-info" v-show="selectIndex===0">
                    <div class="img">

                        <el-upload class="avatar-uploader" action="http://182.92,221.225:8888/common/upload"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" width="72px" height="72px" v-lazy="imageUrl">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <p>点击头像修改</p>
                    </div>
                    <div class="info">
                        <p><span class="label">账号:</span><span>{{userInfo.cusId}}</span></p>
                        <p><span class="label">昵称:</span><span>{{userInfo.cusNickname}}</span></p>
                        <p><span class="label">性别:</span><span>{{userInfo.cusGender?'女':'男'}}</span></p>
                        <p><span class="label">手机号:</span><span>{{userInfo.cusTel}}</span></p>
                    </div>
                    <p class="edit" @click="isShowEditUserInfo=true"><i class="el-icon-edit"></i>修改</p>
                </div>
                <div class="addr" v-show="selectIndex===1">
                    <h1>地址管理</h1>
                    <ul>
                        <li v-for="(item,index) in addressList" @mouseenter="mouseEnterAddrIndex=index"
                            @mouseleave="mouseEnterAddrIndex=-1">
                            <i v-show="item.type">默认</i>
                            <div>
                                <h1>{{item.name}}</h1>
                                <h2>{{item.tel.substring(0,4)+"***"+item.tel.substring(7,11)}}</h2>
                                <h3>{{item.area}}</h3>
                                <h3>{{item.areaDetail}}</h3>
                                <h3>{{item.post}}</h3>
                            </div>
                            <div class="operation" v-show="mouseEnterAddrIndex===index">
                                <span v-show="!item.type" @click="setDefault(item.addrId)">设为默认地址</span>
                                <span @click="editAddr(index)">编辑</span>
                                <span v-show="!item.type" @click="setdel(item.addrId)">删除</span>
                            </div>
                        </li>
                        <li class="add" @click="isShowAddrPanel = true">
                            <i class="iconfont iconjiajianzujianjiahao"></i>
                            <p>添加地址</p>

                        </li>
                    </ul>
                </div>

                <div class="order" v-show="selectIndex===2">
                    <el-tabs v-model="activeName">
                        <el-tab-pane name="2">
                            <span slot="label" class="pane-label"> 待付款</span>
                            <div class="content">
                                <div v-if="unPay.length<=0" class="my-empty"><img
                                        src=""><span>暂无相关订单</span>
                                </div>
                                <ul v-else>
                                    <li v-for="item in unPay ">

                                        <h1>{{'请在：'+(item.TTL/60).toFixed(0)+'分钟内进行付款'}} <span class="state">待付款</span>
                                        </h1>

                                        </h1>
                                        <ul>
                                            <li v-for="(store) in item.order.stores ">
                                                <h2 style="display: flex; align-items: center; margin-bottom: 10px;">
                                                    <el-avatar shape="square" :size=" 24" fit="fill"
                                                        style="margin-right: 10px;">{{store.sName}}
                                                    </el-avatar>
                                                    <span style="margin-left: 10px;">{{store.sName}}</span>
                                                </h2>
                                                <ul class="pro-list">
                                                    <li v-for=" (pro) in store.productList ">
                                                        <div class="img" @click="gotoProInfo(pro.proId)">
                                                            <img v-lazy="pro.pIcon" width="84px" height="84px">
                                                        </div>
                                                        <p @click="gotoProInfo(pro.proId)"> {{pro.pName}}</p>
                                                        <p> {{pro.pPrice+'元x'+pro.pNum}}</p>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <div class="operation">
                                            <div class="order-info" @click=toUnpayProInfo(item)>订单详情</div>
                                            <a :href="'../pay/pay.html?orederId='+item.order.orderId" target="_blank">
                                                <div class="pay">立即支付</div>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane name="0">
                            <span slot="label" class="pane-label"> 待发货</span>
                            <div class="content">
                                <div v-if="unDeliver.length<=0" class="my-empty"><img
                                        src=""><span>暂无相关订单</span>
                                </div>
                                <ul v-else>
                                    <li v-for="item in this.unDeliver">
                                        <h1>{{'订单日期：'+item.orderCreateTime}}<span class="state">待发货</span>
                                        </h1>
                                        <ul class="pro-list">
                                            <li v-for="(pro) in JSON.parse(item.proInfo).proList  ">
                                                <div class="img" @click="gotoProInfo(pro.proId)">
                                                    <img v-lazy="pro.proIcon" width="84px" height="84px">
                                                </div>
                                                <p @click="gotoProInfo(pro.proId)"> {{pro.proName}}</p>
                                                <p> {{pro.proPrice+'元x'+pro.proCount}}</p>
                                            </li>
                                        </ul>
                                        <div class="operation">
                                            <div class="order-info" @click="toProInfo(item)">订单详情</div>
                                            <div class="pay" @click="applyShouhou(item)">申请售后</div>

                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane name="3">
                            <span slot="label" class="pane-label"> 待收货</span>
                            <div class="content">
                                <div v-if="unReceive.length<=0" class="my-empty"><img
                                        src=""><span>暂无相关订单</span>
                                </div>
                                <ul v-else>
                                    <li v-for="item in this.unReceive">
                                        <h1>{{'订单日期：'+item.orderCreateTime}}<span class="state">待收货</span>
                                        </h1>
                                        <ul class="pro-list">
                                            <li v-for="(pro) in JSON.parse(item.proInfo).proList  ">
                                                <div class="img" @click="gotoProInfo(pro.proId)">
                                                    <img v-lazy="pro.proIcon" width="84px" height="84px">
                                                </div>
                                                <p @click="gotoProInfo(pro.proId)"> {{pro.proName}}</p>
                                                <p> {{pro.proPrice+'元x'+pro.proCount}}</p>
                                            </li>
                                        </ul>
                                        <div class="operation">
                                            <div class="order-info" @click="toProInfo(item)">订单详情</div>
                                            <div class="pay" @click="receiptOption(item)">立即收货</div>
                                            <div class="pay" @click="applyShouhou(item)">申请售后</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="1">
                            <span slot="label" class="pane-label"> 已收货</span>
                            <div class="content">
                                <div v-if="received.length<=0" class="my-empty"><img
                                        src=""><span>暂无相关订单</span>
                                </div>
                                <ul v-else>
                                    <li v-for="item in this.received">
                                        <h1>{{'订单日期：'+item.orderCreateTime}} <span class="state">已收货</span>
                                        </h1>
                                        <ul class="pro-list">
                                            <li v-for="(pro) in JSON.parse(item.proInfo).proList ">
                                                <div class="img" @click="gotoProInfo(pro.proId)">
                                                    <img v-lazy="pro.proIcon" width="84px" height="84px">
                                                </div>
                                                <p @click="gotoProInfo(pro.proId)"> {{pro.proName}}</p>
                                                <p> {{pro.proPrice+'元x'+pro.proCount}}</p>
                                            </li>
                                        </ul>
                                        <div class="operation">
                                            <div class="order-info" @click="toProInfo(item)">订单详情</div>

                                            <el-popover placement="top" trigger="hover" width="250">
                                                <div
                                                    style="display: flex; justify-content: space-between; align-items: center;">
                                                    <el-rate v-model="rateValue" show-score text-color="#ff9900"
                                                        allow-half score-template="{value}分">
                                                    </el-rate>


                                                    <el-button type="primary" size="mini" @click="rateOption(item)">
                                                        确定
                                                    </el-button>
                                                </div>


                                                <div class="pay" slot="reference" v-if="item.orderRateTime==null">立即评价
                                                </div>

                                            </el-popover>
                                            <div class="pay" v-if="item.orderCloseTime==null"
                                                @click="applyShouhou(item)">申请售后</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane name="4">
                            <span slot="label" class="pane-label"> 全部订单</span>
                            <div class="content">
                                <div v-if="all.length<=0" class="my-empty"><img
                                        src=""><span>暂无相关订单</span>
                                </div>
                                <ul v-else>
                                    <li v-for="item in this.all ">
                                        <h1>{{'订单日期：'+item.orderCreateTime}}
                                            <span class="state">
                                                {{item.orderState==5?"已关闭":(item.orderState==4?"已完成":(item.orderState==3?"已发货":"待发货"))}}
                                            </span>
                                        </h1>
                                        <ul class="pro-list">
                                            <li v-for="(pro) in JSON.parse(item.proInfo).proList">
                                                <div class="img" @click="gotoProInfo(pro.proId)">
                                                    <img v-lazy="pro.proIcon" width="84px" height="84px">
                                                </div>
                                                <p @click="gotoProInfo(pro.proId)"> {{pro.proName}}</p>
                                                <p> {{pro.proPrice+'元x'+pro.proCount}}</p>
                                            </li>
                                        </ul>
                                        <div class="operation">
                                            <div class="order-info" @click="toProInfo(item)">订单详情</div>



                                            <el-popover placement="top" trigger="hover" width="250">
                                                <div
                                                    style="display: flex; justify-content: space-between; align-items: center;">
                                                    <el-rate v-model="rateValue" show-score text-color="#ff9900"
                                                        allow-half score-template="{value}分">
                                                    </el-rate>


                                                    <el-button type="primary" size="mini" @click="rateOption(item)">
                                                        确定
                                                    </el-button>
                                                </div>

                                                <div class="pay"
                                                    v-if="item.orderReceiveTime!=null&&item.orderCloseTime==null&&item.orderRateTime==null"
                                                    slot="reference">立即评价</div>

                                            </el-popover>
                                            <div class="pay" @click="receiptOption(item)"
                                                v-if="item.orderReceiveTime==null&&item.orderDeliverTime!=null&&item.orderCloseTime==null">
                                                立即收货
                                            </div>
                                            <div class="pay" v-if="item.orderCloseTime==null"
                                                @click="applyShouhou(item)">申请售后</div>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>

                <div class="order-detail" v-if="selectIndex===3">
                    <h1>订单详情</h1>
                    <h2>
                        <p>订单状态:</p>
                        <p>{{orderDetail.orderState==5?"已关闭":(orderDetail.orderState==4?"已完成":(orderDetail.orderState==3?"已发货":"待发货"))}}
                        </p>
                    </h2>
                    <ul class="progress-box">
                        <li class="yuan-left ok ">下单</li>
                        <li :class="{'ok':null!=orderDetail.orderPayTime}">付款</li>
                        <li :class="{'ok':null!=orderDetail.orderDeliverTime}">发货</li>
                        <li :class="{'ok':null!=orderDetail.orderReceiveTime}">完成</li>
                        <li class="yuan-right" :class="{'ok':null!=orderDetail.orderRateTime}">评价</li>
                    </ul>
                    <ul class="progress-box-time">
                        <li>{{orderDetail.orderCreateTime}}</li>
                        <li>{{orderDetail.orderPayTime}}</li>
                        <li>{{orderDetail.orderDeliverTime}}</li>
                        <li>{{orderDetail.orderReceiveTime}}</li>
                        <li>{{orderDetail.orderRateTime}}</li>
                    </ul>

                    <h3>
                        <p>订单编号: {{orderDetail.orderId}}</p>
                        <p>下单日期: {{orderDetail.orderCreateTime}}</p>
                        <p>订单金额: <i>{{orderDetail.orderMoney}}元</i></p>
                    </h3>
                    <h4>
                        <p><span>收货人:{{this.addr.addrConsignee}}</span><span>联系电话:{{this.addr.addrTel}}</span></p>
                        <p>收货地址:{{this.addr.addrProvince+this.addr.addrCity+this.addr.addrDistrict+this.addr.addrTowns+this.addr.addrDetailed}}
                        </p>
                    </h4>
                    <ul class="pro-list">

                        <li v-for="pro in proInfo.proList  ">

                            <div class="img" @click="gotoProInfo(pro.proId)" style="cursor: pointer;">
                                <img v-lazy="pro.proIcon" width="84px" height="84px">
                            </div>
                            <p @click="gotoProInfo(pro.proId)" style="cursor: pointer;"> {{pro.proName}}</p>
                            <p> {{pro.proPrice+'元x'+pro.proCount}}</p>
                        </li>
                    </ul>
                    <div class="total">
                        <table>
                            <tr>
                                <th>商品总价:</th>
                                <td>{{proInfo.orderPrice}}元</td>
                            </tr>
                            <tr>
                                <th>运费:</th>
                                <td>{{proInfo.orderPrice>99?0:10}}元</td>
                            </tr>
                        </table>
                    </div>
                    <h5>
                        <p><span>应付金额:</span><i>{{orderDetail.orderMoney}}</i><span>元</span></p>
                    </h5>

                </div>
                <div class="order-detail" v-if="selectIndex===4">
                    <h1>订单详情</h1>

                    <template v-if="unPayDetail.order!=undefined">
                        <h2>
                            <p>订单状态:</p>
                            <p>待付款</p>
                        </h2>
                        <ul class="progress-box">
                            <li class="yuan-left ok ">下单</li>
                            <li>付款</li>
                            <li>发货</li>
                            <li>完成</li>
                            <li class="yuan-right">评价</li>
                        </ul>
                        <ul class="progress-box-time">
                            <li>请{{(unPayDetail.TTL/60).toFixed(0)}}分钟内付款完成</li>
                        </ul>

                        <h3>
                            <p>订单编号: {{unPayDetail.order.orderId}}</p>
                            <p>订单金额: <i>{{unPayDetail.order.total}}元</i></p>
                        </h3>


                        <h4>
                            <p><span>收货人:{{unPayDetail.addr.addrConsignee}}</span><span>联系电话:{{unPayDetail.addr.addrTel}}</span>
                            </p>
                            <p>收货地址:{{unPayDetail.addr.addrProvince+unPayDetail.addr.addrCity+unPayDetail.addr.addrDistrict+unPayDetail.addr.addrTowns+unPayDetail.addr.addrDetailed}}
                            </p>
                        </h4>



                        <ul class="pro-list" v-for="(store) in unPayDetail.order.stores">
                            <h2 style="display: flex; align-items: center; margin-bottom: 10px;">
                                <el-avatar shape="square" :size=" 24" fit="fill" style="margin-right: 10px;">
                                    {{store.sName}}
                                </el-avatar>
                                <span style="margin-left: 10px;">{{store.sName}}</span>
                            </h2>


                            <li v-for="item in store.productList">

                                <div class="img" @click="gotoProInfo(pro.proId)" style="cursor: pointer;">
                                    <img v-lazy="item.pIcon" width="84px" height="84px">
                                </div>
                                <p @click="gotoProInfo(pro.proId)" style="cursor: pointer;"> {{item.pName}}</p>
                                <p> {{item.pPrice+'元x'+item.pNum}}</p>
                            </li>
                        </ul>

                        <div class="total">
                            <h5>
                                <p><span>应付金额(含运费，店铺s满99包邮):</span><i>{{unPayDetail.order.total}}</i><span>元</span></p>
                            </h5>
                            <div class="operation">
                                <a :href="'../pay/pay.html?orederId='+unPayDetail.order.orderId" target="_blank">
                                    <div class="pay">立即支付</div>
                                </a>
                            </div>

                        </div>




                    </template>
                </div>
                <div class="orderRef" v-if="selectIndex===5">
                    <h1 class="title">我的服务单</h1>
                    <div v-if="applyRefList.length<=0" class="my-empty"><img
                        src=""><span>暂无相关服务单</span>
                </div>
                    <div class="service-list" v-else>
                        <div class="service-list-item" v-for="item in applyRefList"
                            :class="[item.refState==1?'waring':item.refState==2?'success':item.refState==3?'success':'denger']">
                            <div class="hd"
                                :class="[item.refState==1?'waring':item.refState==2?'success':item.refState==3?'success':'denger']">
                                <div class="status"
                                    :class="[item.refState==1?'waring':item.refState==2?'success':item.refState==3?'success':'denger']">
                                    服务单{{item.refState==1?'等待审核':item.refState==2?'处理中':item.refState==3?'已完成':'未通过审核'}}<small>{{item.refReason}}</small>
                                </div>
                                <div class="s-info">
                                    <span>{{item.refAppliyTime}}</span>
                                    <span>服务单号：{{item.refId}}</span>
                                </div>
                            </div>
                            <div class="bd">
                                <div>

                                    <img width="84px" height="84px" :src="JSON.parse(item.proId).proIcon">
                                    <span> {{JSON.parse(item.proId).proName}}</span>


                                </div>
                                <div>
                                    <div class="button" @click="toServiceInfo(item)">服务单详情</div>
                                </div>
                            </div>

                        </div>

                    </div>


                </div>
                <div class="service-detail" v-if="selectIndex===6">
                    <h1 class="title">服务单详情</h1>
                    
                    <h2 class="subtitle">服务单号 {{applyRefInfo.refId}}</h2>
                    <el-card class="box-card">
                        <el-collapse v-model="collapseActiveName" accordion>
                            <el-collapse-item title="服务详情" name="1">
                                <el-timeline reverse>
                                    <el-timeline-item  v-for="(activity, index) in optionLog"
                                    :key="index"
                                    :timestamp="activity.operationTime">
                                        {{activity.operationDes}}
                                    </el-timeline-item>
                                </el-timeline>

                            </el-collapse-item>
                        </el-collapse>
                    </el-card>

                    <div class="bd">
                        <div>
                            <img width="84px" height="84px" :src="JSON.parse(applyRefInfo.proId).proIcon">
                            <span> {{JSON.parse(applyRefInfo.proId).proName}}</span>
                        </div>
                        <div>
                            <div class="button">订单号： {{applyRefInfo.orderId}}
                            </div>
                        </div>
                    </div>
                    <div class="info-table">
                        <table>
                            <tbody>
                                <tr>
                                    <th>进度查询 :</th>
                                    <th>{{applyRefInfo.refState==1?'等待审核':applyRefInfo.refState==2?'处理中':applyRefInfo.refState==3?'已完成':'未通过审核'}}
                                    </th>
                                </tr>
                                <tr>
                                    <td>工 单 号 :</td>
                                    <td>{{applyRefInfo.refId}}</td>
                                </tr>
                                <tr>
                                    <td>服务原因 :</td>
                                    <td>{{applyRefInfo.refReason}}</td>
                                </tr>
                                <tr>
                                    <td>问题描述 :</td>
                                    <td>{{applyRefInfo.refDes}}</td>
                                </tr>
                                <tr>
                                    <td>图 片 :</td>
                                    <td>
                                        <template v-if="JSON.parse(applyRefInfo.refImages).length<=0">
                                            <p>无</p>
                                        </template>
                                        <template v-else>
                                            <img v-for="url in JSON.parse(applyRefInfo.refImages) " :src="url"
                                                height="128px" width="128px" style="margin-right: 5px; margin-top: 20px;">
                                        </template>
                                    </td>
                                </tr>
                            </tbody>

                        </table>

                    </div>


                </div>
            </div>
        </div>
        <!-- foot -->
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>

            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>


            </div>



        </footer>
        <!-- 侧边栏 -->
        <el-backtop :bottom="100">
            <div class="sidebar">
                <ul>
                    <li>
                        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
                            <i class="iconfont iconjiantoushang1"></i>
                        </el-tooltip>
                    </li>
                </ul>
            </div>
        </el-backtop>
        <el-dialog title="添加收货地址" :visible.sync="isShowAddrPanel" width="50%">
            <div class="addr-panel">
                <el-form ref="addrForm" :model="addrForm">
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-input placeholder="姓名" v-model="addrForm.name"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input placeholder="手机号" v-model="addrForm.tel"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-cascader v-model="addrDefault" :props="optionProps" style="width: 100%;" filterable
                                    :options="cityList" placeholder="请选选择省 / 市 / 区 / 街道" @change="addrListChange">
                                </el-cascader>
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="邮政编码" v-model="addrForm.post"></el-input>
                            </el-col>

                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input type="textarea" :rows="2" placeholder="详细地址" v-model="addrForm.areaDetail">
                        </el-input>
                    </el-form-item>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowAddrPanel = false">取 消</el-button>
                <el-button type="primary" @click="addAddr()">添加</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改收货地址" :visible.sync="isShowEditAddrPanel" width="50%">
            <div class="addr-panel">
                <el-form ref="editFrom" :model="editFrom">
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-input placeholder="姓名" v-model="editFrom.name"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input placeholder="手机号" v-model="editFrom.tel"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-cascader v-model="editFrom.area" :props="optionProps" style="width: 100%;"
                                    filterable :options="cityList" placeholder="请选选择省 / 市 / 区 / 街道">
                                </el-cascader>
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="邮政编码" v-model="editFrom.post"></el-input>
                            </el-col>

                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input type="textarea" :rows="2" placeholder="详细地址" v-model="editFrom.areaDetail">
                        </el-input>
                    </el-form-item>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowEditAddrPanel = false">取 消</el-button>
                <el-button type="primary" @click="editAddrSubmit()">修改</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改信息" :visible.sync="isShowEditUserInfo" width="30%" center>
            <el-form label-position="top" label-width="80px" :model="userInfo">
                <el-form-item label="昵称">
                    <el-input v-model="userInfo.cusNickname" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="userInfo.cusGender" :label="false">男</el-radio>
                    <el-radio v-model="userInfo.cusGender" :label="true">女</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowEditUserInfo = false">取 消</el-button>
                <el-button type="primary" @click="editUserInfo">确 定</el-button>
            </span>
        </el-dialog>
        <el-drawer title="申请售后" :visible.sync="drawerShow" direction="rtl" :before-close="handleDrawerClose">

            <el-scrollbar style="height:80vh">
                <ul class="drawer-ruleForm">
                    <li class="title">
                        <h1>选择进行售后服务的商品(必选)</h1>
                    </li>
                    <template v-if="null!=refOrder">
                        <el-scrollbar style=" height: 200px;">
                            <li class="context" style="cursor: pointer;"
                                v-for="(pro) in JSON.parse(refOrder.proInfo).proList" @click="selectRefPro(pro)">
                                <div class="img">
                                    <img v-lazy="pro.proIcon" width="50px" height="50px">
                                </div>
                                <p> {{pro.proName}}</p>
                                <p> {{pro.proPrice+'元x'+pro.proCount}}</p>
                                <i class="select el-icon-check" v-show="refProductId.proId==pro.proId"></i>
                            </li>
                        </el-scrollbar>
                    </template>

                    <li class="title">
                        <h1>选择申请原因(必选)</h1>
                    </li>
                    <li class="context">
                        <el-select placeholder="请选择申请原因" v-model="refReason">
                            <el-option label="拍错了，想退款" value="拍错了，想退款"></el-option>
                            <el-option label="质量问题" value="质量问题"></el-option>
                            <el-option label="退货" value="退货"></el-option>
                            <el-option label="换货" value="换货"></el-option>
                        </el-select>
                        <span> * 售后商品请以实际检测为准，三包外服务需您承担双向物流费用</span>
                    </li>
                    <li class="title">
                        <h1>选择联系人姓名(必选)</h1>
                    </li>
                    <li class="context">
                        <el-input v-model="refName" placeholder="请输入联系人姓名"></el-input>
                    </li>
                    <li class="title">
                        <h1>选择联系人手机号(必选)</h1>
                    </li>
                    <li class="context">
                        <el-input v-model="refTel" placeholder="请输入联系人手机号"></el-input>
                    </li>
                    <li class="title">
                        <h1>输入期望退款金额</h1>
                    </li>
                    <li class="context">
                        <el-input v-model="refMoney" placeholder="请输入金额(人民币)"></el-input>
                    </li>
                    <li class="title">
                        <h1>问题描述</h1>
                    </li>
                    <li class="des">
                        <el-input type="textarea" v-model="refDes" :rows="4" placeholder="请输入产品具体问题">
                        </el-input>
                        <p>*上传机器图片（单张不超过2MB。请注意拍摄画质尽量清晰，突出商品问题。非必填项）</p>
                        <el-upload action="http://182.92,221.225:8888/common/upload" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="5"
                            :on-exceed="handleExceed" :on-success="handleSuccess">
                            <i class="el-icon-plus" v-show="!imgLimit"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogImgPreVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>

                    </li>
                </ul>
            </el-scrollbar>
            <div class="drawer-ruleForm">
                <el-button @click="handleDrawerClose">取消</el-button>
                <el-button type="primary" @click="subApplyRef">申请</el-button>
            </div>



        </el-drawer>

    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    const baseUrl = 'http://182.92,221.225:8888'
    var app = new Vue({
        el: '#app',
        data: {

            imageUrl: '', //用户头像
            //用户信信息
            userInfo: {

            },
            isLogin: false,
            proImg: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1566371533.62465335.jpg?thumb=1&w=80&h=80',
            selectIndex: 0, //当前选中侧边栏下标 0-我的信息 1-地址管理 2-订单列表 3-订单详情 
            breadcrumbText: '我的资料', //面包屑文字
            activeName: '2', //我的订单当前选中
            mouseEnterAddrIndex: -1, //鼠标经过地址项
            isShowAddrPanel: false, //是否展示 添加地址面板
            isShowEditAddrPanel: false,
            isShowEditUserInfo: false,

            cityList: null, //城市列表
            addrDefault: [], //默认地址
            editFrom: {
                addrId: '',
                name: '',
                tel: '',
                area: [],
                areaDetail: '',
                post: '',
            }, //修改地址的的表单
            addrForm: {
                name: '',
                tel: '',
                area: '',
                areaDetail: '',
                post: '',

            }, //添加地址的表单
            optionProps: {
                value: 'label',
                label: 'label',
                children: 'children'
            }, //选地址的参数配置
            addressList: [

            ],
            unPay: [],
            unReceive: [],
            received: [],
            unDeliver: [],
            all: [],
            orderDetail: {},
            unPayDetail: {},
            addr: {},
            proInfo: {},
            visibleRateId: -1, //评分框
            rateValue: 0, //评分值
            iconClasses: ['icon-rate-face-1', 'icon-rate-face-2',
                'icon-rate-face-3'
            ], // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
            drawerShow: false, //申请售后
            dialogImgPreVisible: false, //照片预览
            dialogImageUrl: '', //预览图片地址
            imgLimit: false, //是否超出最大照片限制

            //=============
            refOrder: null, //申请售后的订单



            refReason: '', //退货原因
            refDes: '', //售后 具体描述
            refProductId: '', //售后商品id
            refImgs: [], //描述图片
            refMoney: '',
            refTel:'',//联系人手机号
            refName:'',//联系人姓名
            //==============

            applyRefList: [], //全部服务申请
            applyRefInfo: {}, //选中服务申请
            collapseActiveName: '-1',
            optionLog: [], //申请操作记录
          






        },
        created() {
            this.getCityList();
            this.checkLogin();



        },
        mounted() {

        },
        methods: {


            //获取操作记录
            getOptionLog() {
                
                axios.get(baseUrl + '/common/refund/option?refId=' + this.applyRefInfo.refId)
                    .then(res => {
                        if (res.data.code == 2000) {
                            console.log(res.data.data);
                            this.optionLog = res.data.data

                        } else {

                        }

                    })
                    .catch(err => {
                        console.error(err);
                    })



            },



            //去服务详情
            toServiceInfo(item) {
                this.applyRefInfo = item
                this.getOptionLog()
                this.switchIndex(6, '服务单详情')

            },
            //获取客户服务单
            getApplyRef() {

                axios.get(baseUrl + '/common/refund/get?cusId=' + this.userInfo.cusId)
                    .then(res => {
                        if (res.data.code == 2000) {
                            console.log(res.data.data);
                            this.applyRefList = res.data.data

                        } else {

                        }

                    })
                    .catch(err => {
                        console.error(err);
                    })

            },

            //提交申请
            subApplyRef() {

                let reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;

                let imgs = []
                for (let index = 0; index < this.refImgs.length; index++) {
                    const element = this.refImgs[index];
                    imgs.push(element.response.data.url)
                }


                if ('' == this.refProductId) {
                    this.$message.error('未选择  商品 请选择商品');
                } else {
                    if ('' == this.refReason) {
                        this.$message.error('未选择  原因 请申请原因');
                    } else {

                        if(''==this.refName){
                            this.$message.error('请输入联系人姓名');
                        }else{
                            if(!reg.test(this.refTel)){
                                this.$message.error('请输入正确的手机号');
                            }else{
                                axios.post(baseUrl + '/common/refund/apply', {
                                refReason: this.refReason,
                                refImages: JSON.stringify(imgs),
                                orderId: this.refOrder.orderId,
                                refDes: this.refDes,
                                money: this.refMoney,
                                proId: JSON.stringify(this.refProductId),
                                storeId: this.refOrder.storeId,
                                cusId: this.refOrder.cusId,
                                cusName:this.refName,
                                cusTel:this.refTel,
                            })
                            .then((response) => {
                                if (response.data.code == 2000) {
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.refOrder = null
                                    this.refReason = ''
                                    this.refDes = ''
                                    this.refProductId = ''
                                    this.refImgs = []
                                    this.refMoney = ''
                                    this.drawerShow = false
                                    this.refTel=''
                                    this.refName=''


                                } else {
                                    this.$message({
                                        message: '提交失败',
                                        type: 'error'
                                    });
                                    this.refOrder = null
                                    this.refReason = ''
                                    this.refDes = ''
                                    this.refProductId = ''
                                    this.refImgs = []
                                    this.refMoney = ''
                                    this.drawerShow = false
                                    this.refTel=''
                                    this.refName=''
                                    

                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                            }
                        }
           
                        


                      



                    }
                }



            },
            handleDrawerClose() {
                this.refOrder = null
                this.refReason = ''
                this.refDes = ''
                this.refProductId = ''
                this.refImgs = []
                this.refMoney = ''

                this.drawerShow = false

            },

            //选择商品 
            selectRefPro(proId) {
                this.refProductId = proId
            },

            //售后申请
            applyShouhou(item) {
                this.refOrder = item
                this.drawerShow = true

            },

            //照片移除监听
            handleRemove(file, fileList) {
                this.refImgs = fileList
                if (fileList.length >= 5) {
                    this.imgLimit = true
                } else {
                    this.imgLimit = false
                }
            },
            //点击预览按钮监听
            handlePictureCardPreview(file) {
                console.log(file);
                this.dialogImageUrl = file.response.data.url;
                this.dialogImgPreVisible = true;
            },
            //上传成功监听
            handleSuccess(response, file, fileList) {
                this.refImgs = fileList
            },


            //上传图片超出限制 监听
            handleExceed(file, fileList) {
                console.log(file, fileList);
                if (fileList.length >= 5) {
                    this.imgLimit = true
                    this.$notify({
                        title: '失败',
                        message: '最多上传5张图片',
                        type: 'error'
                    });
                }
            },



            //收货操作
            receiptOption(item) {
                axios.get(baseUrl + '/shop/order/receipt?oId=' + item.orderId)
                    .then(res => {
                        if (res.data.code == 2000) {
                            this.getReceived();
                            this.getUnReceive();
                            this.getAll();
                            this.$notify({
                                title: '成功',
                                message: '收货成功',
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '失败',
                                message: '收货失败',
                                type: 'error'
                            });
                        }

                    })
                    .catch(err => {
                        console.error(err);
                    })

            },

            //评分操作
            rateOption(item) {
                console.log(item);
                axios.get(baseUrl + '/common/store/rate?oId=' + item.orderId + "&sId=" + item.storeId +
                        "&rate=" + this.rateValue)
                    .then(res => {
                        if (res.data.code == 2000) {
                            this.getReceived();
                            this.getAll();
                            this.$notify({
                                title: '成功',
                                message: '评分成功',
                                type: 'success'
                            });
                            this.rateValue = 0
                        } else {
                            this.$notify({
                                title: '失败',
                                message: '评分失败',
                                type: 'error'
                            });
                        }

                    })
                    .catch(err => {
                        console.error(err);
                    })
            },


            //文件上传
            handleAvatarSuccess(res, file) {
                this.userInfo.cusAvatar = res.data.url
                this.imageUrl = res.data.url


                axios.get(baseUrl +
                        '/common/customer/editAvatar?cusId=' + this.userInfo.cusId + '&avatarUrl=' + this
                        .imageUrl)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.$message.success('修改成功');
                            sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo))
                        } else {
                            this.$message.error('修改失败');
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },

            //修改用户信息提交
            editUserInfo() {
                axios.post(baseUrl + '/common/customer/edit', {
                        cusId: this.userInfo.cusId,
                        cusNickname: this.userInfo.cusNickname,
                        cusGender: this.userInfo.cusGender,
                    })
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo))
                            this.isShowEditUserInfo = false

                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                            this.isShowEditUserInfo = false

                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },





            //检查登录
            checkLogin() {
                const userInfo = sessionStorage.getItem("userInfo")
                if (null === userInfo) {
                    this.isLogin = false
                    window.location.href = '../index/index.html';
                } else {
                    this.isLogin = true
                    this.userInfo = JSON.parse(userInfo)
                    this.imageUrl = this.userInfo.cusAvatar
                    this.getAddressList()


                }
            },

            async getAddressList() {
                this.addressList = await axios.get(baseUrl +
                        '/common/address/getAddress?cusId=' + this.userInfo.cusId)
                    .then(function (response) {
                        return response.data.data

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //获取地址信息
            async getCityList() {
                this.cityList = await axios.get(
                        'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/json/CityList.json')
                    .then(function (response) {
                        return response.data

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //获取订单信息  
            getUnPay() {
                axios.get(baseUrl + '/shop/order/getUnpay?cId=' + this.userInfo.cusId)
                    .then(res => {

                        this.unPay = res.data.data;

                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

            getUnReceive() {
                axios.get(baseUrl + '/shop/order/getMyOrder?cId=' + this.userInfo.cusId + '&state=3')
                    .then(res => {


                        this.unReceive = res.data.data;
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            getReceived() {
                axios.get(baseUrl + '/shop/order/getMyOrder?cId=' + this.userInfo.cusId + '&state=4')
                    .then(res => {
                        this.received = res.data.data;

                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            getUnDeliver() {
                axios.get(baseUrl + '/shop/order/getMyOrder?cId=' + this.userInfo.cusId + '&state=2')
                    .then(res => {

                        this.unDeliver = res.data.data;

                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

            getAll() {
                axios.get(baseUrl + '/shop/order/getMyAllOrder?cId=' + this.userInfo.cusId)
                    .then(res => {

                        this.all = res.data.data;

                    })
                    .catch(err => {
                        console.error(err);
                    })
            },


            //去个人中心
            gotoPersional() {
                window.location.href = '../personal/personal.html';
            },
            gotoCar() {
                window.location.href = '../car/car.html';
            },
            //退出登录
            logout() {
                sessionStorage.removeItem("userInfo")
                window.location.href = '../index/index.html';
            },
            //切换左侧tab栏
            switchIndex(index, text) {
                this.selectIndex = index
                this.breadcrumbText = text
                if (index == 2) {
                    this.getReceived();
                    this.getUnReceive();
                    this.getUnPay();
                    this.getAll();
                    this.getUnDeliver();
                }
                if (index == 5) {
                    this.getApplyRef()
                }


            },
            //添加地址
            addAddr() {

                //   验证表单   
                if (this.addrForm.name === '') {
                    this.$message({
                        message: '收货人姓名不能为空',
                        center: true,
                        type: 'error'
                    });
                } else {
                    if (!/^1[3|4|5|7|8]\d{9}$/.test(this.addrForm.tel)) {
                        this.$message({
                            message: '请输入正确的手机号',
                            center: true,
                            type: 'error'
                        });
                    } else {
                        if (this.addrForm.area === '') {
                            this.$message({
                                message: '请选择收货地址',
                                center: true,
                                type: 'error'
                            });
                        } else {
                            if (!/[1-9]\d{5}(?!\d)/.test(this.addrForm.post)) {
                                this.$message({
                                    message: '请填写正确的邮编',
                                    center: true,
                                    type: 'error'
                                });
                            } else {
                                if (this.addrForm.areaDetail === '') {
                                    this.$message({
                                        message: '请填写详细地址',
                                        center: true,
                                        type: 'error'
                                    });
                                } else {




                                    axios.post(baseUrl + '/common/address/add', {
                                            cusId: this.userInfo.cusId,
                                            name: this.addrForm.name,
                                            tel: this.addrForm.tel,
                                            area: this.addrForm.area,
                                            areaDetail: this.addrForm.areaDetail,
                                            post: this.addrForm.post

                                        })
                                        .then((response) => {
                                            if (response.data.code == 2000) {
                                                this.$message({
                                                    message: '添加成功',
                                                    type: 'success'
                                                });
                                                this.$refs.addrForm.resetFields();
                                                this.getAddressList()
                                                this.isShowAddrPanel = false

                                            } else {
                                                this.$message({
                                                    message: '添加失败',
                                                    type: 'error'
                                                });
                                                this.isShowAddrPanel = false

                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error);
                                        });
                                }
                            }
                        }

                    }
                }



            },
            //
            addrListChange(value) {
                this.addrForm.area = value[0] + "-" + value[1] + "-" + value[2] + "-" + value[3]
            },

            //去商品详情页
            gotoProInfo(pid) {
                var tempwindow = window.open('_blank');
                tempwindow.location = '../product/product.html?' + encodeURI('pid=' + pid);
            },
            //切换到 商品信息页
            async toProInfo(item) {
                this.selectIndex = 3 //当前选中侧边栏下标 0-我的信息 1-地址管理 2-订单列表 3-订单详情 
                this.breadcrumbText = "订单详情"
                this.orderDetail = item
                this.proInfo = JSON.parse(item.proInfo)
                this.addr = await axios.get(baseUrl + '/common/address/addrById?addrId=' + item.addrId)
                    .then(res => {
                        return res.data.data
                    })
                    .catch(err => {
                        console.error(err);
                    })


            },
            //切换到 待付款商品信息页
            async toUnpayProInfo(item) {

                this.unPayDetail = await axios.get(baseUrl + "/shop/order/getCurrentUnpay?key=order:" + this
                        .userInfo.cusId + ":" + item.order.orderId)
                    .then(res => {
                        this.selectIndex = 4 //当前选中侧边栏下标 0-我的信息 1-地址管理 2-订单列表 3-订单详情 
                        this.breadcrumbText = "订单详情"
                        return res.data.data
                    })
                    .catch(err => {
                        console.error(err);
                    })

            },

            //修改收货地址
            editAddr(index) {
                this.isShowEditAddrPanel = true
                const addr = this.addressList[index]

                this.editFrom.addrId = addr.addrId,
                    this.editFrom.name = addr.name,
                    this.editFrom.tel = addr.tel,
                    this.editFrom.areaDetail = addr.areaDetail,
                    this.editFrom.post = addr.post,
                    this.editFrom.area = addr.area.split("-")

            },
            //修改提交
            editAddrSubmit() {

                //   验证表单   
                if (this.editFrom.name === '') {
                    this.$message({
                        message: '收货人姓名不能为空',
                        center: true,
                        type: 'error'
                    });
                } else {
                    if (!/^1[3|4|5|7|8]\d{9}$/.test(this.editFrom.tel)) {
                        this.$message({
                            message: '请输入正确的手机号',
                            center: true,
                            type: 'error'
                        });
                    } else {
                        if (this.editFrom.area === '') {
                            this.$message({
                                message: '请选择收货地址',
                                center: true,
                                type: 'error'
                            });
                        } else {
                            if (!/[1-9]\d{5}(?!\d)/.test(this.editFrom.post)) {
                                this.$message({
                                    message: '请填写正确的邮编',
                                    center: true,
                                    type: 'error'
                                });
                            } else {
                                if (this.editFrom.areaDetail === '') {
                                    this.$message({
                                        message: '请填写详细地址',
                                        center: true,
                                        type: 'error'
                                    });
                                } else {
                                    axios.post(baseUrl + '/common/address/edit', {
                                            cusId: this.userInfo.cusId,
                                            name: this.editFrom.name,
                                            tel: this.editFrom.tel,
                                            area: this.editFrom.area[0] + "-" + this.editFrom.area[1] +
                                                "-" + this.editFrom.area[2] + "-" + this.editFrom.area[3],
                                            areaDetail: this.editFrom.areaDetail,
                                            post: this.editFrom.post,
                                            addrId: this.editFrom.addrId
                                        })
                                        .then((response) => {
                                            if (response.data.code == 2000) {
                                                this.$message({
                                                    message: '修改成功',
                                                    type: 'success'
                                                });
                                                this.$refs.editFrom.resetFields();
                                                this.getAddressList()
                                                this.isShowEditAddrPanel = false

                                            } else {
                                                this.$message({
                                                    message: '修改失败',
                                                    type: 'error'
                                                });
                                                this.isShowEditAddrPanel = false

                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error);
                                        });
                                }
                            }
                        }

                    }
                }

            },
            //设置默认地址
            setDefault(addrId) {
                axios.get(baseUrl +
                        '/common/address/setDefault?cusId=' + this.userInfo.cusId + "&addrId=" + addrId)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.$message({
                                message: '设置成功',
                                type: 'success'
                            });
                            this.getAddressList()

                        } else {
                            this.$message({
                                message: '设置失败',
                                type: 'error'
                            });

                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //删除地址
            setdel(addrId) {
                axios.get(baseUrl +
                        '/common/address/del?addrId=' + addrId)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getAddressList()

                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }


        },

    })
</script>





</html>